<template>

		<div class="row" >

			<div class="col-md-4 col-sm-6 col-xs-12">

				<section class="box has-border-left-3" >
					<div class="content-body">
						<div class="background-image">
							<div class="uprofile-image mt-30">
								<img alt="" src="./img/default_20240628095722_6.png" class="img-responsive">
							</div>
							<div class="uprofile-name">
								<h3>
									<a href="#" style="color: white;">张三丰</a>
									<span class="uprofile-status online"></span>
								</h3>
								<p class="uprofile-title" style="font-size: 16px;">努力、努力、再努力11</p>
							</div>
						</div>
						<div class="uprofile-info" style=" height: 60px;  background-image: -webkit-linear-gradient(to right, #409EFF, #3d5ae6, #9d73fa) !important;
    background-image: -webkit-gradient(linear, left top, left bottom, from(to right), color-stop(#e8962e), to(#e45131)) !important;
    background-image: linear-gradient(to right bottom, #409EFF, #3d5ae6, #9d73fa) !important;">
						</div>
						<div style="display: flex; position: relative;">
							<!-- 第一个盒子 -->
							<div class="col-xs-4 overOn" style="padding: 10px;" @click="navigateToTargetPagetz">
								<div class="icon-box">
									<label
										style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ccc; display: flex; align-items: center; justify-content: center;">
										<el-icon class="el-icon" style="font-size: 26px;">
											<el-icon-document-copy />
										</el-icon>
									</label>
									<span
										style="font-size: 12px; color: black; display: flex; justify-content: center;">通知设置</span>
								</div>
							</div>

							<!-- 第一条竖线 -->
							<div
								style="position: absolute; left: 33.33%; top: 33.33%; height: 33.33%; width: 1px; background-color: rgba(221, 221, 221, 0.5);">
							</div>

							<!-- 第二个盒子 -->
							<div class="col-xs-4 overOn" style="padding: 10px;" @click="navigateToTargetPagewdsc">
								<div class="icon-box">
									<label
										style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ccc; display: flex; align-items: center; justify-content: center;">
										<el-icon class="el-icon" style="font-size: 26px;">
											<el-icon-collection-tag />
										</el-icon>
									</label>
									<span
										style="font-size: 12px; color: black; display: flex; justify-content: center;">主题设置</span>
								</div>
							</div>

							<!-- 第二条竖线 -->
							<div
								style="position: absolute; left: 66.66%; top: 33.33%; height: 33.33%; width: 1px; background-color: rgba(221, 221, 221, 0.5);">
							</div>

							<!-- 第三个盒子 -->
							<div class="col-xs-4 overOn" style="padding: 10px;" @click="navigateToTargetPagexs">
								<div class="icon-box">
									<label
										style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ccc; display: flex; align-items: center; justify-content: center;">
										<el-icon class="el-icon" style="font-size: 26px;">
											<el-icon-connection />
										</el-icon>
									</label>
									<span
										style="font-size: 12px; color: black; display: flex; justify-content: center;">操作日志</span>
								</div>
							</div>
						</div>
						<br>
						<div style="margin-top: 5px;">


							<div class="content-list">

								<ul class="list" style="width: 100%;">
									<li @click="navigateToTargetPagewdxs">
										<div class="text"> <span>我的线索</span>
										</div>
										<div class="number"><span style="font-size: 20px;">&gt;</span></div>
									</li>

									<li @click="navigateToTargetPagewdkh">
										<div class="text"> <span>我的客户</span>
										</div>
										<div class="number"><span style="font-size: 20px;">&gt;</span></div>
									</li>

									<li @click="navigateToTargetPagewdlxr">
										<div class="text"> <span>我的联系人</span>
										</div>
										<div class="number"><span style="font-size: 20px;">&gt;</span></div>
									</li>

									<li @click="navigateToTargetPagewdsp">
										<div class="text"> <span>我的审批</span>
										</div>
										<div class="number"><span style="font-size: 20px;">&gt;</span></div>
									</li>

									<li @click="navigateToTargetPageyykf">
										<div class="text"> <span>预约看房</span>
										</div>
										<div class="number"><span style="font-size: 20px;">&gt;</span></div>
									</li>

									<li @click="navigateToTargetPagelcdb">
										<div class="text"> <span>流程待办</span>
										</div>
										<div class="number"><span style="font-size: 20px;">&gt;</span></div>
									</li>

								</ul>
							</div>
						</div>


					</div>
				</section>
			</div>
			<div class="col-md-8 col-sm-6 col-xs-12" >
				<section class="box has-border-left-3">
					<div class="content-body" >

						<ul class="nav nav-tabs" style="margin-top: 20px;font-size: 20px;">
							<li class="active">
								<a href="#home-3" data-toggle="tab">
									我的收藏
								</a>
							</li>
							<li>
								<a href="#profile-3" data-toggle="tab">
									目标客户池
								</a>
							</li>

						</ul>
						<div class="tab-content" >
							<div class="tab-pane fade in active" id="home-3">
								<div>
									<el-main class="nopadding" style="height:560px">
										<scTable ref="table" :apiObj="apiObj" row-key="companyId"
											@selection-change="selectionChange" stripe remoteSort remoteFilter >
											<el-table-column type="selection" width="50"></el-table-column>
											<el-table-column label="#" type="index" width="50"></el-table-column>
											<el-table-column label="统一社会信用代码" prop="unifiedCode" width="180"
												:show-overflow-tooltip="true"></el-table-column>
											<el-table-column label="企业名称" prop="name" width="320"
												:show-overflow-tooltip="true"></el-table-column>
											<!-- <el-table-column label="注册地址" prop="reg_area" :show-overflow-tooltip="true" width="120"></el-table-column> -->
											<el-table-column label="企业性质" prop="aptitude" :show-overflow-tooltip="true"
												width="260"></el-table-column>
											<!--<el-table-column label="人员规模" prop="person_num" :show-overflow-tooltip="true" width="100"></el-table-column>-->
											<el-table-column label="产业分类" prop="industryName" width="220"
												:show-overflow-tooltip="true"></el-table-column>
											<el-table-column label="行业领域" prop="domain" width="200"
												:show-overflow-tooltip="true"></el-table-column>
											<el-table-column label="收藏时间" prop="createTime"
												:show-overflow-tooltip="true" width="200"></el-table-column>
											<el-table-column label="操作" fixed="right" align="left" width="260">
												<template #default="scope">
													<el-button-group>
														<!--							<el-button text type="primary" size="small" @click="to_profile(scope.row, scope.$index)" style="padding-left: 0;">查看画像</el-button>-->
														<el-button text type="primary" size="small"
															@click="setTarget(scope.row, scope.$index)">目标客户</el-button>
														<el-popconfirm title="确定取消收藏吗？"
															@confirm="changeCollect(scope.row, scope.$index)">
															<template #reference>
																<el-button text type="primary"
																	size="small">取消收藏</el-button>
															</template>
														</el-popconfirm>
													</el-button-group>
												</template>
											</el-table-column>
										</scTable>
									</el-main>

								</div>

							</div>
							<div class="tab-pane fade" id="profile-3">
								<el-container  style="height:560px">
									<el-header>
										<div class="left-panel">
											<el-button type="primary" icon="el-icon-plus"
												@click="createCustomer">创建客户</el-button>
											<el-button type="danger" plain icon="el-icon-delete"
												@click="batch_del"></el-button>
										</div>
										<div class="right-panel">
											<div class="right-panel-search">
												<el-input placeholder="客户名称"></el-input>
												<el-button type="primary" icon="el-icon-search"
													@click="upsearch"></el-button>
											</div>
										</div>
									</el-header>
									<el-main class="nopadding">
										<scTable ref="table" :apiObj="apiObj" row-key="customerId"
											@selection-change="selectionChange" stripe remoteSort remoteFilter>
											<el-table-column type="selection" width="50"></el-table-column>
											<el-table-column label="#" type="index" width="50"></el-table-column>
											<el-table-column label="客户编号" prop="customerCode"
												width="150"></el-table-column>
											<el-table-column label="客户名称" prop="cnName" width="200"
												:show-overflow-tooltip="true"></el-table-column>
											<el-table-column label="所属行业" prop="industryName" width="100"
												:show-overflow-tooltip="true"></el-table-column>
											<el-table-column label="合作意向" prop="intention" width="150">
												<template #default="scope">
													<el-tag type="success" v-if="scope.row.intention == '1'">强烈</el-tag>
													<el-tag type="warning"
														v-else-if="scope.row.intention == '2'">一般</el-tag>
													<el-tag type="info" v-else>暂无可能</el-tag>
												</template>
											</el-table-column>
											<el-table-column label="客户等级" prop="levelName"
												width="150"></el-table-column>
											<el-table-column label="当前阶段" prop="selStageName"
												width="100"></el-table-column>
											<el-table-column label="跟进人" prop="userName" width="100"></el-table-column>
											<el-table-column label="需求产品" prop="focusProductName" width="200"
												show-overflow-tooltip="true"></el-table-column>
											<el-table-column label="企业法人" prop="legalPerson"
												width="100"></el-table-column>
											<el-table-column label="企业电话" prop="tel" width="150"></el-table-column>
											<el-table-column label="操作" fixed="right" align="right" width="210">
												<template #default="scope">
													<el-button-group>
														<el-button text type="primary" size="small"
															@click="table_show(scope.row, scope.$index)">查看</el-button>
														<el-button text type="primary" size="small"
															@click="table_edit(scope.row, scope.$index)">编辑</el-button>
														<el-button text type="primary" size="small"
															@click="distribution(scope.row, scope.$index)">分配</el-button>
														<el-popconfirm title="确定删除吗？"
															@confirm="table_del(scope.row, scope.$index)">
															<template #reference>
																<el-button text type="primary"
																	size="small">删除</el-button>
															</template>
														</el-popconfirm>
													</el-button-group>
												</template>
											</el-table-column>
										</scTable>
									</el-main>
								</el-container>
							</div>
						</div>
					</div>
				</section>

			</div>

		</div>
	
</template>

<script>
export default {
    data() {
        return {
            // imagePath: "./img/bg.png"
        }
    },
    mounted() {

    },
    methods: {


        navigateToTargetPagewdxs() {

            //我的线索
            this.$router.push('/office/aitask/search');

        },
        navigateToTargetPagewdkh() {

            //我的客户
            this.$router.push('/crm/customer');

        },
        navigateToTargetPagewdlxr() {

            //我的联系人
            this.$router.push('/crm/linkman');

        },
        navigateToTargetPageyykf() {

            //预约看房
            this.$router.push('/attractinvestment/appointment');

        },
        navigateToTargetPagelcdb() {

            //流程待办
            this.$router.push('/bpm/approval');

        },


    }


}
</script>

<style>
@import "@/views/personalCenter/css/index.css";

.background-image {
	background-image: url('./img/term.png');
	background-size: 100% 100%;
	/* 背景图片拉伸至与 div 大小一致 */
	background-repeat: no-repeat;

}

.text {
	color: black;
}

.enterprise-content,
.content-list {
	margin-top: 10px;
}

ul.list>li {
	display: flex;
	justify-content: space-between;
	font-weight: 600;
	cursor: pointer;
	height: 40px;
	border-bottom: 1px solid rgba(221, 221, 221, 0.5);
	align-items: center;
}

.container {
	display: flex;
	/* 使用flex布局 */
	flex-wrap: wrap;
	/* 允许换行 */
	width: 100%;
	/* 容器宽度 */
}

.overOn {
	background: transparent;
	/* 默认背景透明 */
	transition: background 0.3s ease;
	/* 添加过渡效果 */
}

/* 鼠标滑过时的样式 */
.overOn:hover {
	border-radius: 20px;
	background: linear-gradient(to right, white, #f1f1f1);
}
</style>